<template>
  <div>
    <div class="coupon-list-window" :class="value === true ? 'on' : ''">
      <div class="title">
        优惠券
        <span class="iconfont icon-guanbi" @click="close"></span>
      </div>
      <div v-if="couponList.length > 0">
        <div class="coupon-list">
          <div
            class="item acea-row bg2"
            :class="{
              bg1: coupon.type == 1
            }"
            v-for="coupon in couponList"
            :key="coupon.id"
          >
            <div class="money">
              <div>
                ￥<span class="num">{{ coupon.coupon_price }}</span>
              </div>
              <div class="pic-num">满{{ coupon.use_min_price }}元可用</div>
              <div class="pic-num">{{ formatDec(coupon.dec) }}</div>
              <div
                class="dec_info"
                v-if="coupon.dec.length > 7"
                @click="coupon.showInfo = !coupon.showInfo"
              >
                详细信息
              </div>
              <CouponDecWindow
                :decInfo="coupon.showInfo"
                :detail="coupon.dec"
              />
            </div>
            <div class="text" @click="click(coupon)">
              <div class="condition ">
                <span class="line-title">{{ coupon.title }}</span>
                <div class="coupon_time">
                  {{ coupon.time }}
                </div>
              </div>
              <div class="data acea-row row-between-wrapper">
                <div
                  class="iconfont icon-xuanzhong1 font-color-red"
                  v-if="checked === coupon.id"
                ></div>
                <div class="iconfont icon-weixuanzhong" v-else></div>
              </div>
            </div>
          </div>
        </div>
        <div class="couponNo bg-color-red" @click="useThisCoupon">确定</div>
      </div>
      <div v-if="!couponList.length && loaded">
        <div class="pictrue">
          <img src="@assets/images/noCoupon.png" class="image" />
        </div>
      </div>
    </div>
    <div
      class="mask"
      @touchmove.prevent
      :hidden="value === false"
      @click="close"
    ></div>
  </div>
</template>
<style scoped>
.coupon-list-window .iconfont {
  font-size: 0.4rem;
}
.couponNo {
  font-size: 0.3rem;
  font-weight: bold;
  color: #fff;
  width: 4.4rem;
  height: 0.88rem;
  border-radius: 0.43rem;
  text-align: center;
  line-height: 0.86rem;
  margin: 0.6rem auto;
}
.bg-color-red {
  background-color: #ff3c39 !important;
}
/* 重写优惠劵全局样式 */
.coupon-list .item .text {
  flex-direction: row;
  padding-right: 0.22rem;
  align-items: center;
}
.coupon-list .item .condition {
  margin-right: 0.4rem;
  text-align: right;
}
.coupon-list .item .condition .coupon_time {
  margin: 0.12rem 0 .24rem 0;
}
</style>
<script>
import { getOrderCanUseCoupon } from "@api/order";
import CouponDecWindow from "@components/couponDecWindow";
export default {
  name: "CouponListWindow",
  props: {
    order_key: String,
    value: Boolean,
    checked: Number,
    price: {
      type: [Number, String],
      default: undefined
    },
    cartid: {
      type: String,
      default: ""
    }
  },
  components: { CouponDecWindow },
  data: function() {
    return {
      couponList: [],
      loaded: false,
      cartids: this.cartid,
      selectedCoupon: {},
      init: true
    };
  },
  watch: {
    order_key(n) {
      if (n === undefined || n == null) return;
      // this.cartids = n;
      this.getCoupon();
    }
    // price(n) {
    //   if (n === undefined || n == null) return;
    //   this.getCoupon();
    // }
  },
  mounted: function() {},
  methods: {
    formatDec(text) {
      return text.length > 7 ? `${text.slice(0, 7)}...使用` : text;
    },
    close: function() {
      this.$emit("input", false);
      this.$emit("close");
    },
    getCoupon() {
      let data = {
        order_key: this.order_key,
        page: 0
      };
      getOrderCanUseCoupon(data)
        .then(res => {
          this.couponList = res.data.map(item => {
            return {
              ...item,
              showInfo: false
            };
          });
          this.loaded = true;
          this.selectedCoupon = this.couponList.filter(
            item => item.id == this.checked
          );
          if (this.couponList.length > 0 && this.init) {
            this.$emit("checked", { ...this.couponList[0] });
            this.checked = this.couponList[0].id;
          }
          this.init = false;
        })
        .catch(err => {
          this.$dialog.error(err.msg);
        });
    },
    click(coupon) {
      if (this.checked != coupon.id) {
        this.selectedCoupon = coupon;
        this.checked = coupon.id;
      } else {
        this.selectedCoupon = {};
        this.checked = "";
      }
    },
    couponNo: function() {
      this.$emit("checked", null);
      this.$emit("input", false);
    },
    useThisCoupon() {
      this.$emit("checked", this.selectedCoupon);
      this.$emit("input", false);
    }
  }
};
</script>
